import React, { Component } from 'react';
import PropTypes from 'prop-types';

import styles from './ChartTextArea.less';

class ChartTextArea extends Component {

  static defaultProps = {
    title: '',
    fontSize: '20px'
  }

  constructor(props) {
    super(props);
    this.state = {visible: false};
  }

  render() {
    const { visible } = this.state;
    const { title, fontSize, imageSrc, content } = this.props;
    return (
      <div className={styles.frame}>
        <p className={styles.title}>{title}</p>
        <img className={styles.img} src={imageSrc} alt="Image&Text" onLoad={()=>this.setState({visible: true})}/>
        <div style={{padding:10,textAlign:'left',textIndent:'2em',color:'white',fontSize,display:visible?'block':'none'}}>{content}</div>
      </div>
    );
  }
}

ChartTextArea.propTypes = {
  title: PropTypes.string,
  fontSize: PropTypes.string,
  imageSrc: PropTypes.string.isRequired,
  content: PropTypes.string.isRequired
};

export default ChartTextArea;
